<template>
	<div class="containers">
		<div class="container">
			<div class="handle-box">
				<el-button type="primary" icon="el-icon-plus" class="handle-add mr10" @click="addregion" size="small">添加</el-button>
			</div>

			<el-table :data="tableData" class="table" ref="multipleTable" header-cell-class-name="table-header"
				@selection-change="handleSelectionChange" v-loading="loading">
				<!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->

				<el-table-column prop="name" label="优惠卷名称"></el-table-column>
				<el-table-column prop="explain" label="优惠券说明"></el-table-column>
				<!-- <el-table-column prop="end_time" label="优惠券背景">
                    <template slot-scope="scope">
                            <el-image
                                class="table-td-thumb"
                                :src="scope.row.img"
                                :preview-src-list="[scope.row.img.img]"
                            ></el-image>
                        </template>
                </el-table-column> -->
                <el-table-column label="是否注册赠送" align="center">
                    <template slot-scope="scope">

                        <el-tag   effect="dark"> {{ scope.row.gifts==1?'是':'否' }}</el-tag>
                    </template>
                </el-table-column>
				<el-table-column prop="duration" label="有效时长(天)"></el-table-column>
                <el-table-column prop="coupon" label="优惠金额"></el-table-column>
                <el-table-column prop="price" label="满多少可以使用"></el-table-column>
				<el-table-column label="操作" width="180" align="center">
					<template slot-scope="scope">
						<el-button type="text"  @click="handleEdit(scope.row)">编辑</el-button>
						<el-button type="text"  class="red"
							@click="handleDelete(scope.$index, scope.row)">删除</el-button>
            <!-- <el-button type="text" @click="copy('/pages/commodity/list?id='+scope.row.ID)">复制链接</el-button> -->
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
					:page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
			</div>
		</div>

		<!-- 编辑/添加弹出框 -->
		<el-dialog :title="type?'编辑':'添加'" :visible.sync="editVisible">
			<el-form ref="form" :model="form" label-width="170px">
				<el-form-item label="优惠卷名称"><el-input v-model="form.name"></el-input></el-form-item>
                <el-form-item label="优惠卷说明"><el-input v-model="form.explain"></el-input></el-form-item>
                <el-form-item label="有效时长"><el-input v-model="form.duration"></el-input></el-form-item>
                <el-form-item label="满多少可以使用"><el-input v-model="form.price"></el-input></el-form-item>
                 <el-form-item label="优惠金额"><el-input v-model="form.coupon"></el-input></el-form-item>
                <!-- <el-form-item label="优惠卷背景">
				    <div style="color:red;">比例:100/100</div>
					<el-upload class="avatar-uploader" :action="upload+'/'" :show-file-list="false" :data="upimg"
						:on-success="handleAvatarSuccess" :before-upload="beforeupload">
						<img v-if="imageUrl" :src="imageUrl" class="avatar" />
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item> -->
				<el-form-item label="是否注册赠送">
						<el-switch :active-value="1" :inactive-value="0" v-model="form.gifts"></el-switch>
					</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveEdit">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	name: 'basetable',
	data() {
		return {
            value1: [new Date(), new Date()],
			form: {
				name: '',
				explain: '',
				duration:'',
				price:'',
                gifts:0,
                coupon:'',
                img:''
			},
			query: {
				pageIndex: 1,
				 pageSize: 20
			},
			upimg: {
				token: '',
				key: new Date().valueOf()
			},
			code:0,
			upload:'',
			tableData: [],
			multipleSelection: [],
			editVisible: false,
			pageTotal: 0,
			imageUrl: '',
			type:0,
			loading:false
		};
	},
	created() {
        this.getToken().then(res => {
                    this.upimg.token =res.data.token
                    this.url = res.data.url
                    this.upload = res.data.upload
					console.log(res)
				},
				function () {
					console.log('请求失败处理');
				}
			)
        this.getData();
	},
	methods: {
        saveEdit(){
            this.form.duration=Number(this.form.duration)
            this.form.coupon=Number(this.form.coupon)
            this.form.price=Number(this.form.price)
            this.request('admin/coupon/', this.type?'put':'post', this.form).then(res => {
				if (res.errno == 0) {
					this.$message.success(res.errmsg);
					this.form = {
                        name: '',
                        explain: '',
                        duration:'',
                        price:'',
                        gifts:0,
                        coupon:'',
                        img:''
                    };
				} else {
					this.$message.error(res.errmsg);
				}
                this.getData();
                this.editVisible = false;
			});
        },
        addregion(){
            this.type = 0
            this.form={
				name: '',
				explain: '',
				duration:'',
				price:'',
                gifts:0,
                coupon:'',
                img:''
			}
           this.imageUrl = ''
           this.editVisible = true
        },
		// 上传图片
		handleAvatarSuccess(res, file) {
			this.form.img = this.url + res.key;
			this.imageUrl = URL.createObjectURL(file.raw);
		},
		beforeupload(file) {
			if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
				this.$message.error('上传头像图片只能是 JPG、PNG 格式!');
				return false;
			}
			if (file.size / 1024 / 1024 > 1) {
				this.$message.error('上传图标大小不能超过 1M!');
				return false;
			}
			let types = file.name.split('.')//获取图片格式
			this.upimg.key = this.$template+'/home/' + new Date().valueOf() + '.' + types[types.length-1];
		},
		//获取数据
		getData() {
            this.loading=true
			this.request('admin/coupon/', 'get', { page: this.query.pageIndex, size: this.query.pageSize}).then(res => {
				console.log(res)
				this.tableData=res.data.data
				this.pageTotal=res.data.total
			})
            this.loading=false
		},
		// 编辑
		handleEdit(e) {
           this.editVisible = true;
			this.form = e;
			//this.imageUrl = e.img;
			this.type=1
		},
		// 删除操作
		handleDelete(index, row) {
			// 二次确认删除
			this.$confirm('确定要删除吗？', '提示', {
				type: 'warning'
			})
				.then(() => {
					this.request('admin/coupon/', 'delete', { ID: row.ID }).then(res => {
						if (res.errno == 0) {
							this.$message.success(res.errmsg);
							this.tableData.splice(index, 1)
							this.getData()
						} else {
							this.$message.error(res.errmsg);
						}
					});
				})
		},
		// 多选操作
		handleSelectionChange(val) {
			this.multipleSelection = val;
		},
		// 分页导航
		handlePageChange(val) {
			this.$set(this.query, 'pageIndex', val);
			this.getData();
		}
	}
};
</script>

<style scoped>
.container {
	padding: 20px;
}
.el-upload--text {
	width: 200px !important;
}

.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;

	position: relative;
	overflow: hidden;
}

.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	/* width: 100px; */
	height: 100px;
	line-height: 100px;
	text-align: center;
}

.avatar {
	width: 100%;
	height: 178px;
	display: block;
}

.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 300px;
	display: inline-block;
}

.table {
	width: 100%;
	font-size: 14px;
}

.red {
	color: #ff0000;
}

.mr10 {
	margin-right: 10px;
}

.table-td-thumb {
	display: block;
	margin: auto;
	width: 60px;
	height: 60px;
	.el-image img{
		object-fit: cover;
	}
}
/* 设置分页按钮样式 */
.pagination{
	margin-top: 20px;
	display: flex;
	justify-content: flex-end;
}
</style>
